<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-07 09:36:16
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2021-12-14 19:28:38
 * @Description: 菜单树形单选
 -->
<template>
  <div ref="reference">
    <!-- <fks-cascader placeholder="输入权限名称查询" :options="routes" :props="props" filterable v-model="auth"
    :show-all-levels="false" @change="handleChange"></fks-cascader>-->

    <fks-popover
      ref="popover"
      placement="bottom"
      :width="inputWidth"
      :trigger="readonly ? 'manual' : 'click'"
      @show="visible = true"
      @hide="visible = false"
    >
      <fks-input
        v-model="keywords"
        size="mini"
        style="margin-bottom: 8px;"
        maxlength="50"
        :placeholder="LANG.SEARCH_MENU"
      />
      <fks-tree
        ref="tree"
        :data="routes"
        :props="props"
        style="max-height: 200px; overflow: auto;"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        @node-click="handleClick"
      >
        <span slot-scope="{ data }">
          {{ LANG[data.content.title] || data.content.title }}
        </span>
      </fks-tree>
    </fks-popover>
    <fks-input
      v-model="text"
      v-popover:popover
      clearable
      maxlength="50"
      :suffix-icon="visible ? 'fks-icon-arrow-up' : 'fks-icon-arrow-down'"
      style="cursor: pointer;"
      :placeholder="LANG.SELECT_HOLDER"
      @clear="handleClear"
    />
  </div>
</template>

<script type="text/ecmascript-6">
import {
  addResizeListener,
  removeResizeListener
} from 'fawkes-lib/lib/utils/resize-event'
import { AUTH_PORTAL } from '@/store/Getter/getterTypes.js'
import * as Auth from '../../api'
export default {
  name: 'MenuSelect',
  props: {
    parentId: {
      type: String
    },
    pathId: {
      type: String
    },
    id: {
      type: String
    },
    readonly: Boolean
  },
  data() {
    return {
      visible: false,
      props: {
        label: 'title',
        children: 'children'
      },
      inputWidth: '310',
      keywords: '',
      routes: []
    }
  },
  computed: {
    text: {
      get: function () {
        return this.getCurrentNode(this.routes, this.parentId)
      },
      set: function () {}
    },
    portal() {
      return this.$store.state.portal
    }
  },
  watch: {
    keywords(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    //监听resize事件，改变选择框宽度
    this.getMenuTree()
    this.$nextTick(() => {
      const reference = this.$refs.reference
      addResizeListener(reference, this.handleResize)
      this.handleResize()
    })
  },
  beforeDestroy() {
    const reference = this.$refs.reference
    removeResizeListener(reference, this.handleResize)
  },
  methods: {
    /**
     * @description: 点击节点
     * @param {type}
     * @return:
     */
    handleClick(data, node) {
    if(data.content.id == this.id){
      this.$message({
        type: 'warning',
        message: `${this.LANG.ERROR_SAME_AS_PARENT}`
        })
      return false
    }
      this.$emit(
        'update:pathId',
        `${data.content.pathId}${this.id ? this.id + '.' : ''}`
      )
      this.$emit('update:parentId', data.content.id)
      this.$refs.popover.doClose()
    },
    /**
     * @description: 获取选中文本
     * @param {type}
     * @return:
     */
    getCurrentNode(arr, val, res = []) {
      arr.forEach((item) => {
        if (item.content.id == val) {
          res.push(item)
        } else if (item.children) {
          this.getCurrentNode(item.children, val, res)
        }
      })
      return res.length > 0
        ? this.LANG[res[0].content.title] || res[0].content.title
        : ''
    },
    /**
     * @description: 树节点过滤
     * @param {type}
     * @return:
     */
    filterNode(value, data) {
      if (!value) {
        return true
      }

      return (
        (this.LANG[data.content.title] || data.content.title).indexOf(value) !==
        -1
      )
    },
    /**
     * @description: 宽度resize
     * @param {type}
     * @return:
     */

    handleResize() {
      this.$nextTick(() => {
        let reference = this.$refs.reference
        this.inputWidth = Math.max(
          reference.getBoundingClientRect().width - 20,
          200
        )
      })
    },
    /**
     * @description: 获取菜单树
     * @param {type}
     * @return:
     */
    // getMenu() {
    //   this.visible = false
    //   this.$store.dispatch('Auth/' + GET_MENU)
    // },
    getMenuTree() {
      this.visible = false
      return new Promise((resolve) => {
        let params = {
          type: this.$store.getters[AUTH_PORTAL].type,
          portalId: this.$store.getters[AUTH_PORTAL].portalId,
        }
        Auth.getMenusTree(params)
          .then((res) => {
            if (res.status) {
              this.routes = [...res.data]
            } else {
              this.routes = []
            }
            resolve(true)
          })

          .catch(() => {
            resolve(true)
          })
      })
    },
    //清空父节点
    handleClear() {
      let data = {
        content: {
          pathId: '',
          id: ''
        }
      }

      if (this.id) {
        let arr = []
        this.pathId && (arr = this.pathId.split('.'))
        if (arr.length < 5) return false
        Object.assign(data, {
          content: {
            pathId: `.${arr[1]}.`,
            id: arr[1]
          }
        })
      }

      this.handleClick(data)
    }
  }
}
</script>

<style scoped>
</style>
